import React, { Component } from 'react'
import Input from './Input';
import List from './List';

//! 状态提升
//!  react的单项数据流 父组件-todolist-继续向下传递

export default class TodoList extends Component {
    state={
        list:JSON.parse(localStorage.getItem('todolist'))||[]
    }    
    addItem=(e)=>{
        if(e.keyCode==13){
            let val=e.target.value;
            this.setState({list:[val,...this.state.list]},()=>{
                localStorage.setItem('todolist',JSON.stringify(this.state.list));
            });
            e.target.value='';   
        }
    }
    del=(idx)=>{
        this.setState({list:this.state.list.filter((val,index)=>idx!=index)},()=>localStorage.setItem('todolist',JSON.stringify(this.state.list)))
    }
    render() {
        console.log(this.props.data);
        const {list}=this.state;
        return (
            <div>
                <Input addItem={this.addItem}/>
                <List data={list} del={this.del}/>
            </div>
        )
    }
}
